<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>走我们钓鱼去</title>
    <style>
      html,
      body,
      #app,
      .loading {
        width: 100vw;
        height: 100vh;
        display: table-cell;
        box-sizing: border-box;
      }

      .loading {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .title {
        font-size: 30px;
        font-weight: bold;
      }

      @keyframes beating {
        0% {
          transform: translateY(0px);
        }

        10% {
          transform: translateY(-3px);
        }

        20% {
          transform: translateY(-5px);
        }

        30% {
          transform: translateY(-7.5px);
        }

        40% {
          transform: translateY(-9px);
        }

        50% {
          transform: translateY(-10px);
        }

        60% {
          transform: translateY(-9px);
        }

        70% {
          transform: translateY(-7.5px);
        }

        80% {
          transform: translateY(-5px);
        }

        90% {
          transform: translateY(-3px);
        }

        100% {
          transform: translateY(-1px);
        }
      }

      .title:nth-of-type(1) {
        animation: beating 0.5s ease infinite alternate;
      }

      .title:nth-of-type(2) {
        animation: beating 0.5s ease 0.05s infinite alternate;
      }

      .title:nth-of-type(3) {
        animation: beating 0.5s ease 0.1s infinite alternate;
      }

      .title:nth-of-type(4) {
        animation: beating 0.5s ease 0.15s infinite alternate;
      }

      .title:nth-of-type(5) {
        animation: beating 0.5s ease 0.2s infinite alternate;
      }

      .title:nth-of-type(6) {
        animation: beating 0.5s ease 0.25s infinite alternate;
      }

      .title:nth-of-type(7) {
        animation: beating 0.5s ease 0.3s infinite alternate;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="loading">
        <span class="title">走</span>
        <span class="title">我</span>
        <span class="title">们</span>
        <span class="title">钓</span>
        <span class="title">鱼</span>
        <span class="title">去</span>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
